<template>
	<div>
		<div v-for="item of 4" :key="item" ref="setItemRef">
			{{ item }}
		</div>
		<div ref="point" class="point point-flicker">123</div>
	</div>
</template>

<script setup lang="ts">
import {
	ref,
	Ref,
	onMounted,
	isRef,
	unref,
	shallowRef,
	triggerRef,
	reactive,
	useTemplateRef,
} from 'vue'

// 1.使用 ref 获取 DOM 元素
const point = ref<HTMLDivElement | null>(null)
// 2.获取 template ref ，简化需要定义ref变量的步骤
const divElement = useTemplateRef('point')

// .ref可以是回调函数形式，获取多个元素
const itemRefs = ref<Array<HTMLDivElement>>([])
const setItemRef = (el: HTMLDivElement) => {
	itemRefs.value.push(el)
}

onMounted(() => {
	console.log('refs', point.value?.className)
	console.log(point.value, divElement.value)
})

// const a = ref(1); // 自动推断
// const b = ref<number>(2); // 泛型推断
// const c: Ref<number> = ref(2); // 手动赋值Ref类型
// const val = unref(a); // 1 如果参数是 ref，则返回.value，否则返回参数本身
// const flag = isRef(a); // true 检查某个值是否为 ref

// TODO shallowRef 是 只会响应第一层，也就是通过.value 直接赋值，但是 ref 改变会调用 triggerRef ，会更新所有的 ref、shallowRef，此时 shallowRef 会响应
// TODO shallowReactive 同理
const shallowRefData = shallowRef([1])
shallowRefData.value.push(2) // 只有这样是不能响应
triggerRef(shallowRefData) // 这样上面就能响应
shallowRefData.value = [2] // 能响应
</script>
